<!-- 中控台 -->
<template>
  <Teleport to="body">
    <Transition name="fade" mode="out-in" @before-enter="changeCloseStyle">
      <div v-if="store.controlShow" class="control" @click="store.changeShowStatus('controlShow')">
        <!-- 关闭按钮 -->
        <div ref="closeControlRef" class="close-control">
          <i class="iconfont icon-close"></i>
        </div>
        <!-- 背景遮罩 -->
        <div class="control-mask" />
        <!-- 中控台内容 -->
        <div class="control-content" @click.stop>
          <!-- 功能菜单 -->
          <div class="menu">
            <div class="menu-item open" title="显示模式切换" @click.stop="store.changeThemeType">
              <i :class="`iconfont icon-${store.themeType}`"></i>
            </div>
            <div
              :class="['menu-item', { open: store.useRightMenu }]"
              title="右键菜单开关"
              @click.stop="rightMenuSwitch"
            >
              <i class="iconfont icon-list"></i>
            </div>
            <div
              :class="['menu-item', { open: store.playerShow }]"
              title="播放器开关"
              @click.stop="store.playerShow = !store.playerShow"
            >
              <i class="iconfont icon-music"></i>
            </div>
            <div
              :class="['menu-item', { open: store.backgroundBlur }]"
              title="背景模糊开关"
              @click.stop="store.changeShowStatus('backgroundBlur')"
            >
              <i class="iconfont icon-blur"></i>
            </div>
            <div
              :class="['menu-item', { open: store.clickEffect }]"
              title="点击特效开关"
              @click.stop="store.changeShowStatus('clickEffect')"
            >
              <svg
                t="1741945844293"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7063"
                width="20"
                height="20"
              >
                <path
                  d="M693.62568 1023.992c-44.856 0-88.12-25.032-108.96-67.6l-60.312-112.928-34.208 65.312c-0.88 1.68-1.88 3.28-2.984 4.824-22.448 31.16-59.392 42.232-86.744 42.232h-0.664c-30.568-0.208-61.008-13.32-83.504-36a124.152 124.152 0 0 1-36.24-88V313.92c0-47.24 26.624-88.944 69.464-108.84 42.44-19.704 90.952-13.44 126.936 16.304L739.90568 417.6a40 40 0 0 1-47.776 64.16L427.74568 284.88a39.992 39.992 0 0 1-1.92-1.52c-18.096-15.28-37.216-8.24-42.656-5.72-5.432 2.52-23.152 12.592-23.152 36.28v517.912c0 25.776 21.216 43.872 40.264 44h0.184c7.784 0 16.344-3.224 20.608-7.6l67.52-128.88a40 40 0 0 1 35.264-21.432h0.16a40 40 0 0 1 35.28 21.16l96.312 180.304c0.272 0.512 0.528 1.024 0.776 1.544 9.6 20 33.8 28.712 53.936 19.384a40.504 40.504 0 0 0 21.304-23.312 40.48 40.48 0 0 0-1.28-30.624l-97.2-172.952a40 40 0 0 1 34.88-59.592h137.128c23.208-1.184 32.48-19.464 34.776-25.08 2.36-5.76 8.768-25.92-7.792-43.48a40 40 0 0 1 58.208-54.88c32.816 34.808 41.872 84.12 23.616 128.688-18.152 44.32-58.944 72.952-106.448 74.72a37.056 37.056 0 0 1-1.496 0.032h-69.632l64.392 114.584c0.392 0.704 0.768 1.424 1.12 2.144a119.904 119.904 0 0 1 5.064 93.352 119.904 119.904 0 0 1-63.056 69.016 119.624 119.624 0 0 1-50.28 11.064zM325.24168 157.08a40 40 0 0 0 15.84-54.304l-34-62a40 40 0 1 0-70.144 38.472l34 62a39.984 39.984 0 0 0 54.304 15.84z m-84.584 90.96a40 40 0 0 0-20.616-52.672l-64-28a40 40 0 0 0-32.064 73.288l64 28a40.016 40.016 0 0 0 52.68-20.616z m249.304-129.376l22-66a40 40 0 1 0-75.896-25.304l-22 66a40 40 0 1 0 75.896 25.304z m105.856 101.488l54-40a40 40 0 0 0-47.616-64.28l-54 40a40 40 0 0 0 47.616 64.28zM158.86568 445.152l60-24a40 40 0 1 0-29.704-74.28l-60 24a40 40 0 1 0 29.704 74.28z"
                  fill="currentColor"
                  p-id="7064"
                ></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
import { mainStore } from "@/store";

const store = mainStore();

const closeControlRef = ref(null);

// 更正关闭按钮位置
const changeCloseStyle = () => {
  nextTick().then(() => {
    const controlOpenDom = document.querySelector("#open-control");
    if (controlOpenDom && closeControlRef.value) {
      const { top, left } = controlOpenDom.getBoundingClientRect();
      closeControlRef.value.style.top = `${top}px`;
      closeControlRef.value.style.left = `${left}px`;
      closeControlRef.value.style.opacity = "1";
    }
  });
};

// 右键菜单开关
const rightMenuSwitch = () => {
  store.useRightMenu = !store.useRightMenu;
  $message.info(`${store.useRightMenu ? "已开启" : "已关闭"}自定义右键菜单`);
};
</script>

<style lang="scss" scoped>
.control {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  z-index: 1109;
  .close-control {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0;
    opacity: 0;
    transition:
      background-color 0.3s,
      opacity 0.3s;
    border-radius: 50%;
    cursor: pointer;
    .iconfont {
      font-size: 18px;
      line-height: 1;
      transition:
        color 0.3s,
        opacity 0.3s;
    }
    &:hover {
      background-color: var(--main-color);
      .iconfont {
        color: var(--main-card-background);
      }
    }
  }
  .control-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: var(--main-mask-background);
  }
  .control-content {
    position: absolute;
    animation: fade-up 0.5s forwards;
    .menu {
      display: flex;
      flex-direction: row;
      align-items: center;
      .menu-item {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 6px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid var(--main-card-border);
        background-color: var(--main-card-background);
        transition:
          transform 0.3s,
          background-color 0.3s;
        cursor: pointer;
        .iconfont {
          font-size: 24px;
          color: var(--main-font-color);
          transition: color 0.3s;
        }
        &.open {
          background-color: var(--main-color);
          .iconfont {
            color: #fff;
          }
        }
        &:hover {
          transform: scale(1.05);
        }
        &:active {
          transform: scale(1);
        }
      }
    }
  }
}
</style>
